{% extends 'admin/master.html' %}
{% import 'admin/lib.html' as lib with context %}
{% from 'admin/lib.html' import extra with context %} {# backward compatible #}

{% block head %}
  {{ super() }}
  {{ lib.form_css() }}
    <style>
    h1 {
        line-height: 60px;
        height: 60px;
        background: #ddd;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }
    .chart {
        height: 350px;
        /*width: 80%;*/
    }
</style>
{% endblock %}

{% block body %}
  {% block navlinks %}
  <ul class="nav nav-tabs">
    <li>
        <a href="{{ url_for('.index') }}">95值计算</a>
    </li>
  </ul>
  {% endblock %}
<form id="search_frm" method="post" action="{{ url_for('.index') }}" class="admin-form form-horizontal">
  <div class="form-group">
    <label for="exampleInputEmail1" class="col-md-2 control-label">机房选择</label>
  <div class="col-md-10">
      {% for item in idcs %}
          <label class="checkbox-inline">
          <input type="checkbox" name="chkidc_id" {{ 'checked' if item[0] in idc_ids else '' }} value="{{ item[0] }}"> {{ item[1] }}
        </label>
      {% endfor %}
  </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">设备标识</label>
  <div class="col-md-10">
    {% for item in marks %}
          <label class="checkbox-inline">
          <input type="checkbox" name="machine_marks" {{ 'checked' if item[0] in machine_marks else '' }} value="{{ item[0] }}"> {{ '{}-{}'.format(item[0],item[1]) }}
        </label>
      {% endfor %}
  </div>
  </div>
<div class="form-group">
    <label for="deviceids" class="col-md-2 control-label">设备ID</label>
    <div class="col-md-10">
         <input class="form-control" id="deviceids" name="deviceids" placeholder="多个设备ID以逗号分隔" type="text" value="{{ deviceids }}">
        </div>
  </div>
  <div class="form-group">
    <label for="inp_minuter" class="col-md-2 control-label">选择时间点</label>
      <div class="col-md-10">
    <input type="text" class="form-control" data-type="minute" name="inp_day_chart" id="inp_day_chart" readonly placeholder="日期范围">
      <button type="submit" id="search_btn" class="btn btn-default">搜索</button>
      </div>
  </div>
</form>
    <div>
    <div class="col-md-1"></div>
    <div class="col-md-11">
{% for item in result %}
  <div class="panel panel-default">
    <div class="panel-heading">ID={{ item.get('info')[0] }},hostname={{ item.get('info')[1] }},deviceID={{ item.get('info')[2] }}, points={{ item.get('info')[3] }},bandwidth95={{ item.get('bd95val') }}Mbs </div>
  <div class="panel-body">
   <div class="chart" id="bd95_{{ item.get('info')[0] }}"></div>
  </div>
</div>
{% endfor %}

</div>
    </div>


{% endblock %}

{% block tail %}
  {{ super() }}
  {{ lib.form_js() }}
<script src="/static/layer/layer.js?date=7.4.2"></script>
<script src="/static/laydate/laydate.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>

laydate.render({
  elem: '#inp_day_chart'
  ,range: true,
        value:'{{ range_day }}',
        //done:function(value, date, endDate){load_rtx('day', value);},
});
$("#search_frm").submit(function(e){
    if($('#inp_day_chart').val()==''){
          alert('时间范围不能为空');
          return false;
    }
    return true;
});

</script>
<script>
   $(document).ready(function(){
{% for item in result %}
    {{ "var c_bd_{id} = echarts.init(document.getElementById('bd95_{id}'));".format(id=item.get('info')[0])|safe }}
    {{ ("c_bd_%s.setOption({tooltip:{trigger: 'axis'},xAxis:{boundaryGap:false,data:[%s]},yAxis:[{type:'value'}],
    series:[{name:'上行速率',type:'line', smooth:true, lineStyle: { width:0}, showSymbol:false,
    areaStyle: {color:'#4682B4',normal: {}},data:[%s]}]});" % (item.get('info')[0],item.get('data_x'),item.get('data_y')))|safe}}
{% endfor %}

   });
  </script>
{% endblock %}
